<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>电子科大基线扫描平台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <link rel="stylesheet" href="layui/css/layui.css">
  <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer{left: 0;}
            .layui-layout-admin .layui-side{left: -300px;}
        }
    </style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">电子科大基线扫描平台</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>

      <li class="layui-nav-item layui-hide-xs"><a href="">备份服务器</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">日志服务器</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">元宇宙服务器</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">日志网络</a>
        <dl class="layui-nav-child">
          <dd><a href="">扩展日志服务系统01</a></dd>
          <dd><a href="">扩展日志服务系统02</a></dd>
          <dd><a href="">扩展日志服务系统03</a></dd>
        </dl>
      </li>


    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="img/dzkd.png" style="width: 30px;height: 30px">
          电子科技大学管理员
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">个人信息</a></dd>
          <dd><a href="">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">用户管理模块</a>
          <dl class="layui-nav-child">
            <dd><a href="user.html">用户信息管理</a></dd>
            <dd><a href="black.html">黑白名单管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="host.html">主机信息管理</a></li>
        <li class="layui-nav-item layui-this"><a href="RIMmanager.html">远程入侵管理</a></li>
        <li class="layui-nav-item"><a href="listen_port.html">监听端口管理</a></dd></li>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">漏洞管理模块</a>
          <dl class="layui-nav-child">
            <dd><a href="loophole.html">漏洞管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="log.html">异常登录管理</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
       <div style="padding: 15px;">
         <span class="layui-breadcrumb">
           <a href="index.html">首页</a>
           <a><cite>远程入侵管理</cite></a>
         </span>
         <!-- 水平线 -->
         <hr class="layui-bg-blue">

         <div class="layui-form">
             <div class="layui-form-item">
               <!-- 日期选择 -->
               <div class="layui-inline">
                 <div class="layui-inline" id="selectedDate">
                   <div class="layui-input-inline">
                     <input type="text" autocomplete="off" id="startDate" class="layui-input" placeholder="开始日期">
                   </div>
                   <div class="layui-form-mid">-</div>
                   <div class="layui-input-inline">
                     <input type="text" autocomplete="off" id="endDate" class="layui-input" placeholder="结束日期">
                   </div>
                 </div>
               </div>
               <!-- 处理状态选择 -->
               <div class="layui-inline" style="width: 120px;">
                 <input name="" placeholder="处理状态" class="layui-input" id="proState">
               </div>
               <!-- 警告类型选择 -->
               <div class="layui-inline" style="width: 150px;">
                 <input name="" placeholder="全部警告类型" class="layui-input" id="type">
               </div>
               <!-- 主机IP/进程命令搜索 -->
               <div class="layui-inline" style="width: 400px;">
                 <input name="" placeholder="主机IP/进程命令" class="layui-input" id="iP_Command">
               </div>
               <!-- 按钮 -->
               <div class="layui-inline">
                 <button class="layui-btn layui-btn-radius " id="iReset">重置</button>
                 <button class="layui-btn layui-btn-radius " id="searchVal">搜索</button>
               </div>
             </div>
           </div>


           <table class="layui-hide" id="test" lay-filter="test"></table>
       </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    04小组
  </div>
</div>

<script type="text/html" id="toolbarDemo"> <!-- script type="text/html" 默认代表是隐藏的内容 并且默认不会占据任何页面空间  -->
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-primary" lay-event="LAYTABLE_EXPORT" >全部导出</button>
    <button class="layui-btn layui-btn-primary" lay-event="batchProcessing">批量处理</button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
  <a class="layui-btn layui-btn-xs" lay-event="processing">处理<i class="layui-icon layui-icon-down"></i></a>
</script>

<script src="layui/layui.js" charset="utf-8"></script>
<script src="jquery.1.11.js" charset="utf-8"></script>

<script>
    $("#iReset").click(function () {
        $("#startDate").val("");
        $("#endDate").val("");
        $("#proState").val("");
        $("#type").val("");
        $("#iP_Command").val("");
        tableFlush();
    });

    $("#searchVal").click(function () {
        let startDate = $("#startDate").val();
        let endDate = $("#endDate").val();
        let proState = $("#proState").val();
        let type = $("#type").val();
        let iP_Command = $("#iP_Command").val();
        let dkJSON = {};
        if(startDate != null && startDate != '') {
            dkJSON.startDate = startDate;
        }
        if(endDate != null && endDate != '') {
            dkJSON.endDate = endDate;
        }
        if(proState != null && proState != '') {
            dkJSON.proState = proState;
        }
        if(type != null && type != '') {
            dkJSON.type = type;
        }
        if(iP_Command != null && iP_Command != '') {
            dkJSON.iP_Command = iP_Command;
        }
        tableFlush(dkJSON);
    });

    function tableFlush(dkJSON) {
        layui.use(['table','laydate','dropdown', 'layer'], function(){
            var table = layui.table;
            var laydate = layui.laydate;
            var dropdown = layui.dropdown
            ,layer = layui.layer;

            //日期范围
            laydate.render({
                elem: '#selectedDate'
                ,type: 'datetime'
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                ,range: ['#startDate', '#endDate']
            });
            //状态
            dropdown.render({
                elem: '#proState'
                ,data: [{
                  title: '待处理'
                  ,id: 101
                },{
                  title: '已处理'
                  ,id: 102
                }]
                ,click: function(obj){
                  this.elem.val(obj.title);
                }
                ,style: 'width: 120px;'
              });
            dropdown.render({
                elem: '#type'
                ,data: [{
                  title: '高危'
                  ,id: 101
                },{
                  title: '中危'
                  ,id: 102
                },{
                  title: '低危'
                  ,id: 102
                }]
                ,click: function(obj){
                  this.elem.val(obj.title);
                }
                ,style: 'width: 150px;'
              });
            table.render({
                elem: '#test'
                ,url:'/RIM/selectByPage'
                ,where: dkJSON
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: []
                ,title: 'RI数据表'
                ,cols: [[
                   {type: 'checkbox', fixed: 'left'}
                  ,{field:'id', title:'序号', width:70, fixed: 'left', unresize: true}
                  ,{field:'level', title:'风险等级', width:95, unresize: true}
                  ,{field:'type', title:'警告类型', width:135, unresize: true}
                  ,{field:'proCommand', title:'进程命令', width:300, unresize: true}
                  ,{field:'affectedHost', title:'受影响主机', width:150, unresize: true}
                  ,{field:'lastTime', title:'最近发生时间', width:250, unresize: true,sort:true}
                  ,{field:'proState', title:'处理状态', width:100, unresize: true}
                  ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'batchProcessing':
                      var data = checkStatus.data;
                      layer.alert(JSON.stringify(data));
                    break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var that = this
                ,data = obj.data;

                if(obj.event === 'details'){
                  layer.alert(JSON.stringify(data));
                } else if(obj.event === 'processing'){
                  //更多下拉菜单
                  dropdown.render({
                    elem: that
                    ,show: true //外部事件触发即显示
                    ,data: [{
                      title: '更改为待处理'
                      ,id: 'pro_will'
                    },  {
                      title: '更改为已处理'
                      ,id: 'pro_ed'
                    },  {
                      title: '进行处理'
                      ,id: 'pro'
                    }]
                    ,click: function(data, obj){
                      //根据 id 做出不同操作
                      if(data.id === 'pro_will'){
                        obj.update({
                          proState: '待处理'
                        });
                      } else if(data.id === 'pro_ed'){
                        obj.update({
                          proState: '已处理'
                        });
                      } else{
                        obj.update({
                          proState: '进行处理'
                        });
                      }
                    }
                    ,align: 'right' //右对齐弹出（v2.6.8 新增）
                    ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                  });
                }
            });
        });
    }
    tableFlush();
</script>
</body>
</html>
